<template>
  <div class="sideContent">
    <div class="sideNav">
      <el-row class="tac">
        <el-col :span="24">
          <el-menu
            :default-active="defaultActive"
            class="el-menu-vertical-demo"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
            <el-menu-item index="home">
              <i class="el-icon-menu"></i>
              <span slot="title">Home</span>
            </el-menu-item>
            <el-submenu index="shop">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>商品管理</span>
              </template>
              <el-menu-item index="allGoods">所有商品</el-menu-item>
              <el-menu-item index="goodsType">商品类型</el-menu-item>
            </el-submenu>
            <el-submenu index="system">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>系统管理</span>
              </template>
              <el-menu-item index="addressManage">地址管理</el-menu-item>
              <el-menu-item index="orderManage">订单管理</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name:'sideNav',
  data(){
    return {
      defaultActive:"home"
    }
  },
  methods: {
    handleSelect(key){
      this.$router.push({name: key, params: {type: key}});
    }
  },
  mounted(){
    this.defaultActive = this.$route.name
  }
}
</script>
<style lang="less" scope>
.sideContent{
  height: calc(100% - 62px);
  .sideNav{
    position: fixed;
    height: 100%;
    width: 200px;
    margin-top: 60px;
    .el-row,.el-col,.el-menu{
      height: 100%;
    }
  }
}
</style>